const vm = Vue.createApp({
    data() {
        return {
            current: 0, // 传入collectList当前下标
            collectList: [],
            collect: {
                // optionarr
                categoryId: "",
                status: 1,
                sorted: 1,
                hreflink: "http://www.itwhq.top",
                iconlink: "https://www.iamwawa.cn/Uploads/Tool/2020/03-20/5e745f2677f23.png"
            },
            optionobj: {},
            optionarr:[
                /*{id: 1,name: "Java面试"},
                {id: 2,name: "Web开发"},
                {id: 3,name: "设计系统"},
                {id: 4,name: "框架服务"},
                {id: 5,name: "微服务"},
                {id: 6,name: "移动APP"}*/
            ],

            expandAddFlag: false
        }
    },
    created() {
        this.loadCollect();
    },
    methods: {
        // 关闭添加盒子
        closeAddBox() {
            this.expandAddFlag = false;
        },

        // 控制添加盒子隐藏和显示
        expandAddBox(index) {
            // 点击添加的时候，是添加的那个分类信息
            let categoryId = this.collectList[index].categoryId;
            let categoryTitle = this.collectList[index].categoryTitle;
            // 因为select的value是 {id:zxx,name:""}的格式，我们只要组装和他一样的格式，就自动选中select的options
            this.optionobj = {id: categoryId, name : categoryTitle};
            // 记录你当前操作的分类，方便你后续的追加和控制
            this.currentIndex = index;
            // 顺便给添加的collect赋值我们分类id和分类标题
            this.collect.categoryId = categoryId;
            this.collect.categoryTitle = categoryTitle;
            // 展开添加框
            this.expandAddFlag = !this.expandAddFlag;
        },
        // 选择分类的获取分类id和分类标题， 用于添加和修改使用
        selectOption() {
            this.collect.categoryId = this.optionobj.id;
            this.collect.categoryTitle = this.optionobj.name;
        },

        // del 收藏数据
        async delcollect(index,cindex) {
            if (confirm("你确定要抛弃我吗？")) {
                let id = this.collectList[index].collectList[cindex].id;
                let res = await axios.post(`/api/collect/del/${id}`);
                if (res.data) {
                    this.collectList[index].collectList.splice(cindex,1);
                }
            }
        },

        // 查询收藏数据
        async loadCollect() {
            try {
                let collect = await axios.get('/api/collect/load');
                this.collectList = collect.data;
                this.optionarr = this.collectList.map(c => ({
                    id : c.categoryId,
                    name : c.categoryTitle
                }))
                console.log(this.collectList)
            } catch (e) {
                alert("查询超时")
            }

        },

        // 开始保存收藏
        async saveCollect() {
            document.getElementById("title").focus();
            if (!this.collect.title) {
                alert("标题不能为空！")
                return;
            }
            try {
                let collect = await axios.post('/api/collect/saveupdate',this.collect);
                alert("添加数据成功！")
                // 追加数据到目标元素盒子
                this.collectList[this.currentIndex].collectList.push(collect.data);
                this.restCollect();
                // 关闭添加盒子
                this.closeAddBox();
            } catch (e) {
                alert("添加失败")
            }

        },

        // 重置数据
        restCollect() {
            this.collect = {
                    categoryId: "",
                    status: 1,
                    sorted: 1,
                    hreflink: "http://www.itwhq.top",
                    iconlink: "https://www.iamwawa.cn/Uploads/Tool/2020/03-20/5e745f2677f23.png"
            }
        }

    }
}).mount("#app");